<template>
  <section class="edit-nickname">
    <!--<x-input title="昵称" placeholder="输入昵称" text-align="right" placeholder-align="right"></x-input>-->
    <x-input  :placeholder="$t('edit nickname')" text-align="left" placeholder-align="left" v-model="nickname"></x-input>
    <p style="color: #898989;padding: .4rem 1rem" v-if="query.info">{{$t('want to edit')}}</p>
    <div class="btn-box" v-if="!query.info">
      <x-button type="primary" v-on:click.native = "change">{{$t('confirm')}}</x-button>
    </div>
  </section>
</template>

<i18n>
  edit nickname:
    en: New Nickname
    zh-CN: 请输入用户名
  want to edit:
    en: If you want to edit, please contact customer service!
    zh-CN: 如果想要修改，请联系管理员
</i18n>

<script>
  import {XInput, Group, XButton} from 'vux'

  export default {
    name: 'editNickName',
    components: {
      XInput,
      Group,
      XButton
    },
    data () {
      return {
        nickname: ''
      }
    },
    created () {
      this.init()
    },
    computed: {
      query () {
        return this.$route.query
      }
    },
    methods: {
      init () {
        this.nickname = this.query.info
      },
      change () {
        let vue = this
        vue.post({
          url: '/api/account/change_nickname',
          params: {
            token: localStorage.token,
            nickname: vue.nickname
          },
          success: function (data) {
            if (vue.nickname === '') {
              vue.$vux.toast.text(data.msg)
            } else {
              vue.$vux.toast.text(data.msg)
              vue.$router.back(-1)
            }
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .edit-nickname {
    height: 100%;
    background-color: #fff;
    font-size: 0.28rem;

    .btn-box{
      padding: 8rem 0.3rem 0;
      button{
        background: #179b16;
        color: #fff;
        border: 1px solid #57a94f;
        padding: 0 8px;
        border-radius: 3px;
      }
    }
  }
</style>
